<template>
  <a-card
    :body-style="{ padding: '24px 32px' }"
    :bordered="false"
    title="个人信息"
  >
    <a-row>
      <a-col>
        <a-form
          class="form"
          :form="form"
          @submit="handleSubmit"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="4">
            <!-- <a-col span="24" offset="10" class="colTitle">个人信息</a-col> -->
            <a-col :xl="8" :lg="12" :md="12" :sm="24">
              <a-form-item label="id" hidden>
                <a-input
                  placeholder="输入id"
                  v-decorator="['id', { initialValue: datas.id }]"
                />
              </a-form-item>
              <a-form-item label="姓名">
                <a-input
                  placeholder="输入姓名"
                  v-decorator="['disbName', { initialValue: datas.disbName }]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="手机号">
                <a-input
                  placeholder="请输入手机号"
                  v-decorator="['mobile', { initialValue: datas.mobile }]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="编号">
                <a-input
                  placeholder="请输入编号"
                  v-decorator="['disbNO', { initialValue: datas.disbNO }]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="类型">
                <a-input
                  placeholder="请输入类型"
                  v-decorator="['distype', { initialValue: datas.distype }]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="渠道">
                <a-input
                  placeholder="请输入渠道"
                  v-decorator="['channel', { initialValue: datas.channel }]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="上级编号">
                <a-input
                  placeholder="请输入上级编号"
                  v-decorator="['superiorNumber', { initialValue: datas.superiorNumber }]"
                />
              </a-form-item>
              <div v-if="hideDocItem">
                <a-form-item label="医院">
                  <a-input
                    placeholder="请输入医院"
                    v-decorator="['hospital', { initialValue: datas.hospital }]"
                    readOnly
                  />
                </a-form-item>
                <a-form-item label="科室">
                  <a-input
                    placeholder="请输入科室"
                    v-decorator="[
                      'department',
                      { initialValue: datas.department },
                    ]"
                    readOnly
                  />
                </a-form-item>
              </div>

              <!-- <a-form-item hidden>
                <a-col :span="8" offset="6"
                  ><a-form-item
                    label="审核"
                    :label-col="{ span: 12 }"
                    :wrapper-col="{ span: 8 }"
                  >
                    <a-checkbox
                      v-decorator="[
                        'agreement',
                        {
                          valuePropName: 'checked',
                          initialValue: datas.isApprve,
                        },
                      ]"
                      disabled
                    /> </a-form-item
                ></a-col>
                <a-col :span="8" 
                  ><a-form-item label="生效" :label-col="{ span:12}"
                    :wrapper-col="{ span: 8}">
                    <a-checkbox
                      v-decorator="[
                        'enabled',
                        {
                          valuePropName: 'checked',
                          initialValue: datas.enabled,
                        },
                      ]"
                      disabled
                    /> </a-form-item
                ></a-col>
              </a-form-item> -->
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24">
              <a-form-item label="联系人">
                <a-input
                  placeholder="请输入联系人"
                  v-decorator="['contactor', { initialValue: datas.contactor }]"
                />
              </a-form-item>
              <a-form-item label="联系电话">
                <a-input
                  placeholder="输入联系电话"
                  v-decorator="['phone', { initialValue: datas.phone }]"
                />
              </a-form-item>

              <a-form-item label="联系地址">
                <a-input
                  placeholder="输入联系地址"
                  v-decorator="['address', { initialValue: datas.address }]"
                />
              </a-form-item>
              <a-form-item label="传真号码">
                <a-input
                  placeholder="输入传真号码"
                  v-decorator="['fax', { initialValue: datas.fax }]"
                />
              </a-form-item>

              <a-form-item label="电子邮箱">
                <a-input
                  placeholder="输入电子邮箱"
                  v-decorator="['email', { initialValue: datas.email }]"
                />
              </a-form-item>
              <a-form-item label="微信号">
                <a-input
                  placeholder="输入微信号"
                  v-decorator="['wx', { initialValue: datas.wx }]"
                />
              </a-form-item>
              <a-form-item label="QQ">
                <a-input
                  placeholder="输入QQ"
                  v-decorator="['qq', { initialValue: datas.qq }]"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24">
              <a-form-item label="创建时间">
                <a-date-picker
                  v-decorator="[
                    'creationTime',
                    { initialValue: datas.creationTime },
                  ]"
                  disabled
                />
              </a-form-item>
              <a-form-item label="开始时间">
                <a-date-picker
                  v-decorator="['startDate', { initialValue: datas.startDate }]"
                  disabled
                /> </a-form-item
              ><a-form-item label="截止时间">
                <a-date-picker
                  v-decorator="['endDate', { initialValue: datas.endDate }]"
                  disabled
                />
              </a-form-item>

              <a-form-item label="公司法人" hidden>
                <a-input
                  placeholder="输入公司法人"
                  v-decorator="[
                    'legalPerson',
                    { initialValue: datas.legalPerson },
                  ]"
                  readOnly
                />
              </a-form-item>
              <a-form-item label="企业证件号" hidden>
                <a-input
                  placeholder="输入企业证件号"
                  v-decorator="['entIdNum', { initialValue: datas.entIdNum }]"
                  readOnly
                />
              </a-form-item>

              <a-form-item label="开户行">
                <a-select
                  show-search
                  allowClear
                  class="selete"
                  @change="getSelect"
                  v-decorator="['bank', { initialValue: datas.bank }]"
                >
                  <a-select-option
                    :value="item.categoryIndex"
                    v-for="(item, index) in selectData"
                    :key="index"
                  >
                    {{ item.categoryName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="银行分支名称">
                <a-input
                  placeholder="输入银行分支名称"
                  v-decorator="[
                    'bankBranch',
                    { initialValue: datas.bankBranch },
                  ]"
                />
              </a-form-item>
              <a-form-item label="银行账号">
                <a-input
                  placeholder="输入银行账号"
                  v-decorator="[
                    'bankAccount',
                    { initialValue: datas.bankAccount },
                  ]"
                />
              </a-form-item>
              <a-form-item>
                <span slot="label">
                  资质证书&nbsp;
                  <a-tooltip title="上传医师资格证，身份证等证明信息">
                    <a-icon type="question-circle-o" />
                  </a-tooltip>
                </span>
                <a-upload
                  action="http://124.71.234.61:21021/Home/UploadFilesAsync"
                  list-type="picture-card"
                  :file-list="fileList"
                  name="files"
                  @preview="handlePreview"
                  @change="handleChange"
                  :headers="header"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
                <a-modal
                  :visible="previewVisible"
                  :footer="null"
                  @cancel="handleCancel"
                >
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="12">
              <a-form-item :wrapperCol="{ offset: 20 }">
                <a-button type="primary" size="large" html-type="submit">
                  保存
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import dayjs from "dayjs";
import axios from "axios";
import { getUserData, getBanks, postUserData } from "../../services/dataSource";
const BAS_URL = "http://124.71.234.61:21021/Home/GetImageAsync?sysRowId=";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  name: "company",
  data() {
    return {
      temp: [],
      basurl: BAS_URL,
      form: this.$form.createForm(this),
      id: "",
      selectData: [],
      previewImage: "",
      previewVisible: false,
      datas: {},
      header: {
        authorization: "",
      },
      mobile: "",
      fileList: [], //资质图片列表
      hideDocItem: false,
      distype: "",
      formLayout: "horizontal",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },

    // 银行下拉框
    getSelect(val) {
      this.bank = val;
    },
    //获取分销商个人信息
    getData() {
      getUserData(this.id)
        .then((res) => {
          this.datas = res.data.result;
          this.datas.creationTime = dayjs().format("YYYY-MM-DD");
          var tempBusinesslicense = [];
          var temp = [];
          if (this.datas.businesslicense && this.datas.businesslicense != "") {
            tempBusinesslicense = this.datas.businesslicense.split(",");
            tempBusinesslicense.forEach((element) => {
              var obj = {
                uid: element,
                name: element,
                response: {
                  result: element,
                },
                status: "done",
                url:
                  "http://124.71.234.61:21021/Home/GetImageAsync?sysRowId=" +
                  element,
              };
              temp.push(obj);
            });
            this.fileList = temp;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //确认保存

    handleSubmit(e) {
      var temp = [];
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          temp.push(item.response.result);
        });
        temp = temp.join(",");
        this.datas.businesslicense = temp;
      } else {
        this.datas.businesslicense = "";
      }
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          values.commissionRate = this.datas.commissionRate
          values.grade = this.datas.grade
          values.businesslicense = this.datas.businesslicense
          values.cashOutAmt = this.datas.cashOutAmt
          values.commissionAmt = this.datas.commissionAmt
          values.isApprve = this.datas.isApprve
          values.enabled = this.datas.enabled
          values.memberID = this.datas.memberID
          values.notCashOutAmt = this.datas.notCashOutAmt
          values.password = this.datas.password
          // values.superiorNumber = this.datas.superiorNumber
      postUserData(values).then((res) => {
        if (res.data.success == true) {
          this.$message.success("修改成功！");
          this.getData();
          
      window.localStorage.setItem("bankAccount", values.bankAccount);
        } else {
          this.$message.error("修改失败，请重试！");
        }
      });
         
        }
      });
    },
  },
  computed: {},
  created() {
    this.id = window.localStorage.getItem("id");
    this.disbName = window.localStorage.getItem("disbName");
    this.disbNO = window.localStorage.getItem("disbNO");
    this.mobile = window.localStorage.getItem("mobile");
    this.distype = window.localStorage.getItem("distype");
    if (this.distype == "医生注册") {
      this.hideDocItem = true;
    } else {
      this.hideDocItem == false;
    }
    this.getData();
    getBanks().then((res) => {
      this.selectData = res.data.result.items;
    });
    this.header.authorization = localStorage.getItem("Authorization");
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
}
.tabs {
  text-align: center;
}

.form {
  margin-top: 30px;
}
.selete {
  width: 100%;
}
.ipt {
  width: 19%;
}
.pad {
  display: inline-block;
}
.tit {
  width: 500px;
  height: auto;
  background-color: pink;
  position: relative;
  margin-top: 20px;
}
.form[data-v-497485c8] {
  margin-top: 10px;
}
.colTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}
.imgBox {
  width: 400px;
  height: 100px;
  display: flex;

  img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}
</style>
